<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>微博详情页面</title>
    <style>        body {
        font-family: 'Arial', sans-serif;
        background: linear-gradient(135deg, #f5f7fa, #c3cfe2);
        margin: 0;
        padding: 0;
        color: #333;
    }
    .container {
        width: 80%;
        max-width: 1200px;
        margin: 50px auto;
        padding: 30px;
        background: rgba(255, 255, 255, 0.9);
        border-radius: 15px;
        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
        transition: transform 0.3s ease;
    }
    .container:hover {
        transform: translateY(-10px);
    }
    h1 {
        text-align: center;
        color: #333;
        margin-bottom: 30px;
        font-size: 2.5em;
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
    }
    h2 {
        margin-bottom: 15px;
        font-size: 1.8em;
        color: mediumvioletred;
    }
    h4 {
        margin-bottom: 10px;
        font-size: 1.2em;
        color: #555;
    }
    p {
        margin-bottom: 15px;
        color: #777;
    }
    .comment-section {
        margin-top: 30px;
    }
    .comment-item {
        margin-bottom: 20px;
        padding: 15px;
        background: rgba(255, 255, 255, 0.8);
        border-radius: 10px;
        box-shadow: 0 5px 10px rgba(0, 0, 0, 0.05);
        transition: transform 0.3s ease;
    }
    .comment-item:hover {
        transform: translateY(-5px);
    }
    .comment-item span {
        color: red;
    }
    textarea {
        width: 100%;
        padding: 15px;
        margin-bottom: 15px;
        border: 1px solid #ddd;
        border-radius: 10px;
        resize: vertical;
        transition: border-color 0.3s ease;
    }
    textarea:focus {
        border-color: #007bff;
        outline: none;
    }
    input[type="button"] {
        padding: 15px 30px;
        background-color: #007bff;
        color: #fff;
        border: none;
        border-radius: 10px;
        cursor: pointer;
        transition: background-color 0.3s ease;
    }
    input[type="button"]:hover {
        background-color: #0056b3;
    }
    hr {
        border: none;
        height: 1px;
        background: linear-gradient(to right, transparent, #ddd, transparent);
        margin: 30px 0;
    }
    @media (max-width: 768px) {
        .container {
            width: 95%;
            padding: 20px;
        }
        h1 {
            font-size: 2em;
        }
        h2 {
            font-size: 1.6em;
        }
        h4 {
            font-size: 1em;
        }
    }
    </style>
</head>
<body>

<div class="container">
    <h1>微博详情页面</h1>
    <h2><span style="color:mediumvioletred">{{weibo.nickname}}</span>: {{weibo.content}}</h2>
    <p>发布于: {{weibo.created}}</p>
    <hr>

    <div class="comment-section">
        <div v-for="c in arr" class="comment-item">
            <h4>
                <span style="color:red">{{c.nickname}} 评论道:</span> {{c.content}}
                <span style="float: right; font-size: 0.9em;">发布于：{{c.created}}</span>
            </h4>
        </div>
    </div>

    <textarea cols="30" rows="3" placeholder="评论内容..." v-model="comment.content"></textarea>
    <input type="button" value="评论" @click="insert()">
</div>

<!-- 引入axios和vue的框架文件 -->
<script src="https://cdn.bootcss.com/axios/0.18.0/axios.min.js"></script>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<script>    let v = new Vue({
    el: ".container",
    data: {
        weibo: {},
        comment: { content: "" },
        arr: []
    },
    methods: {
        insert() {
            // 查看评论表:id(不需要传递)、content、created(服务器生成)
            // user_id(当前登录用户的id)、weibo_id(在weibo对象中获取)
            // 发布评论时需要把当前浏览的微博id添加到评论对象中
            v.comment.weiboId = v.weibo.id;
            // 发请求,发布评论
            axios.post("/v1/comment/insert", v.comment).then(function (response) {
                // 未登录不能评论
                if (response.data == 1) {
                    location.reload(); // 刷新页面
                } else {
                    alert("请先登录");
                    location.href = "/login.html";
                }
            });
        }
    },
    created: function () {
        axios.get("/v1/weibo/selectById" + location.search).then(function (response) {
            v.weibo = response.data;
        });

        // 发请求获取当前微博相关的评论
        // 上面的get()会开线程发请求,主线程会继续往下走
        axios.get("/v1/comment/selectByWeiboId" + location.search).then(function (response) {
            v.arr = response.data;
        });
    }
});
</script>

</body>
</html>